<template>
  <div>
    <h1>Post List</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState, mapActions } from "vuex";
export default {
  name: "PostList",
  metaInfo: {
    title: "Posts",
  },
  computed: {
    ...mapState(["posts"]),
  },
  // vue ssr 特殊为服务端渲染提供的生命周期函数 会在渲染之前调用 用作数据预取
  // 发起action 返回promise
  serverPrefetch() {
    return this.getPosts();
  },
  methods: {
    ...mapActions(["getPosts"]),
  },
  // 服务端渲染只支持beforeCreated和created
  // 服务端渲染不支持响应式数据和生命周期中的异步操作
  // async created() {
  //   console.log("Post Created Start");
  //   const { data } = await axios({
  //     method: "GET",
  //     url: "https://conduit.productionready.io/api/articles",
  //   });
  //   this.posts = data.articles;
  //   console.log("End");
  // },
};
</script>